import 'package:concierge/app/constant.dart';
import 'package:concierge/app/models/phone_cc.dart';
import 'package:concierge/app/widgets/custom_text_field.dart';
import 'package:concierge/generated/locales.g.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import 'logic.dart';

class PhoneLoginPage extends StatelessWidget {
  const PhoneLoginPage({super.key});
  @override
  Widget build(BuildContext context) {
    final PhoneLoginLogic logic = Get.find<PhoneLoginLogic>();
    final state = logic.state;
    var hintStyle = TextStyle(color: Colors.grey, fontSize: 14.sp);
    return Scaffold(
      appBar: AppBar(
        title: Text(
          LocaleKeys.phone_code_login.tr,
          style: TextStyle(color: Colors.black),
        ),
        centerTitle: true,
      ),
      body: Padding(
        padding: EdgeInsets.all(25),
        child: Column(
          children: [
            IntrinsicHeight(
              child: Row(
                children: [
                  ConstrainedBox(
                    constraints: BoxConstraints(
                      minWidth: 70,
                      maxWidth: 70, // 限制最大宽度
                    ),
                    child: Obx(() {
                      if (state.ccList.isEmpty) {
                        return DropdownButton<CCListElement>(
                          menuWidth: 200,
                          padding: EdgeInsets.symmetric(vertical: 10),
                          isDense: true,
                          isExpanded: true,
                          underline: SizedBox.shrink(),
                          value: state.selectCc.value,
                          onChanged: (CCListElement? newValue) {
                            state.selectCc.value ??= newValue;
                          },
                          items: [
                            DropdownMenuItem<CCListElement>(
                              value: state.selectCc.value,
                              child: Row(
                                children: [
                                  Text(
                                    "+${state.selectCc.value?.callingCode}",
                                    style: TextStyle(color: Colors.black),
                                  ),
                                  SizedBox(width: 20),
                                  Expanded(
                                    child: Text(
                                      "${state.selectCc.value?.country}",
                                      textAlign: TextAlign.end,
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ],
                          selectedItemBuilder: (BuildContext context) {
                            return [
                              Text(
                                "+${state.selectCc.value?.callingCode}",
                                style: TextStyle(color: Colors.black),
                              ),
                            ];
                          },
                        );
                      } else {
                        return DropdownButton<CCListElement>(
                          menuWidth: 200,
                          padding: EdgeInsets.symmetric(vertical: 10),
                          isDense: true,
                          isExpanded: true,
                          underline: SizedBox.shrink(),
                          value: state.selectCc.value,
                          onChanged: (CCListElement? newValue) {
                            state.selectCc.value ??= newValue;
                          },
                          items: List.generate(state.ccList.length, (i) {
                            var bean = state.ccList[i];
                            return DropdownMenuItem<CCListElement>(
                              value: bean,
                              child: Row(
                                children: [
                                  Text(
                                    "+${bean.callingCode}",
                                    style: TextStyle(color: Colors.black),
                                  ),
                                  SizedBox(width: 20),
                                  Expanded(
                                    child: Text(
                                      bean.country,
                                      textAlign: TextAlign.end,
                                    ),
                                  ),
                                ],
                              ),
                            );
                          }),
                          selectedItemBuilder: (BuildContext context) {
                            return state.ccList.map((CCListElement bean) {
                              return Text(
                                "+${bean.callingCode}",
                                style: TextStyle(color: Colors.black),
                              );
                            }).toList();
                          },
                        );
                      }
                    }),
                  ),
                  VerticalDivider(
                    color: lineColor,
                    width: 10,
                    thickness: 0.3,
                    indent: 10,
                    endIndent: 10,
                  ),
                  Expanded(
                    child: Obx(
                      () => CustomTextField(
                        value: state.phoneNumber.value,
                        maxLength: 11,
                        maxLines: 1,
                        style: TextStyle(color: Colors.black),
                        onChanged: (t) {
                          state.phoneNumber.value = t;
                        },
                        inputFormatters: [
                          FilteringTextInputFormatter.digitsOnly,
                        ],
                        keyboardType: TextInputType.number,
                        inputDecoration: InputDecoration(
                          isCollapsed: true,
                          isDense: true,
                          counter: SizedBox.shrink(),
                          border: InputBorder.none,
                          hintStyle: hintStyle,
                          hintText: LocaleKeys.input_phone_number.tr,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
            Divider(color: lineColor, height: 25, thickness: 0.3),
            IntrinsicHeight(
              child: Row(
                children: [
                  Expanded(
                    child: Obx(
                      () => CustomTextField(
                        value: state.sms.value,
                        onChanged: (t) {
                          state.sms.value = t;
                        },
                        style: TextStyle(color: Colors.black),
                        inputFormatters: [
                          FilteringTextInputFormatter.digitsOnly,
                          LengthLimitingTextInputFormatter(6),
                        ],
                        keyboardType: TextInputType.number,
                        inputDecoration: InputDecoration(
                          isCollapsed: true,
                          isDense: true,
                          contentPadding: EdgeInsets.symmetric(vertical: 8),
                          border: InputBorder.none,
                          hintStyle: hintStyle,
                          hintText: LocaleKeys.verify_code.tr,
                        ),
                      ),
                    ),
                  ),
                  Obx(() {
                    if (logic.globalService.remainSeconds.value == 0) {
                      return GestureDetector(
                        onTap: logic.sendSmsCode,
                        child: Padding(
                          padding: const EdgeInsets.all(5.0),
                          child: Text(
                            LocaleKeys.get_sms_code.tr,
                            style: TextStyle(
                              fontSize: 14.sp,
                              color: Colors.black,
                            ),
                          ),
                        ),
                      );
                    } else {
                      return Text(
                        "${logic.globalService.remainSeconds.value}s",
                      );
                    }
                  }),
                ],
              ),
            ),
            Divider(color: lineColor, thickness: 0.3),
            SizedBox(height: 40),
            GestureDetector(
              onTap: logic.login,
              child: Container(
                padding: EdgeInsets.symmetric(vertical: 16),
                decoration: BoxDecoration(color: Colors.black),
                child: Center(
                  child: Text(
                    LocaleKeys.login.tr,
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
